:root {
  --value-cell-w: 60px;
  --colorview-swatch: transparent;
}

.config-dialog {
  --pad: 16px;
  --padL: 24px;
  --padR: 24px;
  --icon: 16px;
  --iconR: calc((var(--padR) - var(--icon)) / 2); /* center inside --padR */
  #message-box-contents {
    padding: var(--pad) var(--padR) var(--pad) var(--padL);
    overflow-y: overlay;
  }
  #message-box-buttons {
    padding: calc(var(--pad)/2) var(--padR) calc(var(--pad)/2) var(--padL);
  }
  #stylus-popup & {
    > div {
      top: auto;
      right: auto;
    }
    .config-body label {
      --item-padY: .5em;
    }
  }
}

.sb-overlay {
  --padR: 32px;
  --iconR: calc(var(--padR) - var(--icon)); /* left-align inside --padR */
}

.config-heading {
  top: -1em;
  position: relative;
  text-align: right;
  font-size: 0.9em;
  #stylus-popup & {
    top: -.25em;
  }
}

.config-body {
  & label {
    display: flex;
    align-items: center;
    --item-padY: .75em;
    padding: calc(var(--item-padY) * (1 - var(--num) / 30)) 0; /* old browsers */
    padding: calc(var(--item-padY) * clamp(.2, 1 - (var(--num) - 5) / 30, 1)) 0; /* modern browsers */
    &:first-child {
      padding-top: 0;
    }
    &:last-child {
      padding-bottom: 0;
    }
    &:not(:first-child) {
      border-top: 1px dotted var(--c80);
    }
    &:not(.nondefault) .config-reset-icon {
      visibility: hidden;
    }
  }
  .select-wrapper {
    position: static;
  }
  .dirty {
    font-style: italic;
    &::after {
      content: "*";
      position: absolute;
      left: 6px;
    }
  }
  :is(input:not(.slider), select) {
    width: var(--value-cell-w);
    margin: 0;
    height: var(--input-height);
    box-sizing: border-box;
    vertical-align: middle;
  }
  :is(input[type="text"], .select-wrapper, select) {
    width: auto;
    min-width: var(--value-cell-w);
    max-width: 124px;
    left: auto;
    position: relative;
  }
  & input[type="text"] {
    padding-left: 0.25em;
  }
  & .slider {
    --width: 40px;
  }
}

.config-name {
  flex-grow: 1;
  margin-right: 1em;
}

.config-value {
  box-sizing: border-box;
  flex-shrink: 0;
  &:not(.slider):not(.select-wrapper) > :not(:last-child) {
    margin-right: 4px;
  }
}

.current-value {
  padding: 2px 4px;
  margin-right: 4px;
  .config-range & {
    min-width: 6ch;
  }
}

:is(.config-number, .config-range) span {
  line-height: var(--input-height);
}

.config-reset-icon {
  height: var(--icon);
  position: absolute;
  right: var(--iconR);
  cursor: pointer;
  & i {
    color: var(--c65);
    font-size: var(--icon);
    padding: 0 1px;
    box-sizing: border-box;
    flex-shrink: 0;
  }
  &:hover i {
    color: var(--c40);
  }
}

#config-autosave-wrapper {
  display: inline-flex;
  align-items: center;
}

#message-box-buttons {
  position: relative;
}

.config-error {
  position: absolute;
  z-index: 99;
  left: 0;
  right: 0;
  bottom: -1rem;
  padding: 0 .75rem;
  line-height: 24px;
  height: 24px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  background-color: red;
  color: white;
  font-weight: bold;
  text-shadow: 0.5px 0.5px 6px #400;
  animation: fadein .5s;
}

#message-box .colorview-swatch {
  padding: 0;
  box-sizing: content-box;
}

#message-box .colorview-swatch,
#message-box .colorview-swatch::before,
#message-box .colorview-swatch::after,
.color-swatch {
  width: var(--value-cell-w);
  height: 20px;
  left: 0;
  margin: 0;
  border: 1px solid transparent;
  box-sizing: content-box;
  background-position: unset;
}
.color-swatch {
  position: absolute;
  top: 0;
  left: 0;
  border: 1px solid var(--c50);
  cursor: pointer;
  opacity: 1;
  z-index: 2;
}

.colorpicker-popup {
  z-index: 2147483647 !important;
  border: none !important;
  box-shadow: 3px 3px 50px rgba(0,0,0,.5) !important;
}
